import React, { Component } from 'react';
import { useDrag } from 'react-dnd';

export default (WrappedComponent) => {
  class DragWrapperComponent extends Component {
    constructor(props) {
      super();
    }
    render() {
      const { isDragging, dragRef, ...restProps } = this.props;
      return (
        <div
          ref={dragRef}
          style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1 }}
        >
          <WrappedComponent {...restProps} />
        </div>
      );
    }
  }

  return (props) => {
    const [{ isDragging }, drag] = useDrag(() => ({
      type: 'TreeChildItem',
      item: props,
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }));

    return (
      <DragWrapperComponent {...props} dragRef={drag} isDragging={isDragging} />
    );
  };
};
